// 所有项目 所有端（app端除外） 【上传图片组件】
// 供所有项目直接使用
// 依赖：WMUtils/beastUtils、WMSrc/.../UploadBase
//      libSrc/constants/COMMON、libUtils/beastBase、
//      styles/components/uploadImg.less

import React, { Component } from 'react'
import merge from 'lodash/merge'
import assign from 'lodash/assign'
import toLower from 'lodash/toLower'
import isArray from 'lodash/isArray'
import isString from 'lodash/isString'
import isFunction from 'lodash/isFunction'

import {isObjectValEqual} from '/common/utils/utils'

//import {API_DOMAIN} from 'libSrc/constants/COMMON'
import UploadBase from '../UploadBase'
import { message, Button } from 'antd';
import './uploadImg.less'

const API_DOMAIN = '';

export default class UploadImg extends Component {

    constructor(props) {
        super(props);
        this.initVarInComp();
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (!isObjectValEqual(this.props, nextProps)) {
            this.setMutableData(nextProps);
            return true;
        }
        if (!isObjectValEqual(this.state, nextState)) {
            return true;
        }
        return false;
    }

    getAjaxData() {
        return {
            picsArr: this.picsArr.join(';'),
            inputsArr: this.inputsArr.join(';'),
            inputsArr2: this.inputsArr2.join(';')
        };
    }

    /**
     * 初始化组件内部的变量
     */
    initVarInComp() {
        this.options = {
            uploadUrl: '', // ajax 请求的接口 url
            uploadType: 'pic', // 上传的文件格式（'pic':图片; 'file':文件），默认是图片
            fileTypes: [], // 支持的文件类型，例如：['jpg','png','jpeg']、['mp4']
            fileMaxSize: 15 * 1024 * 1024, // 文件大小

            txt: '', // 上传按钮文字，如：点击上传图片
            txtTip: '', // 上传按钮中的提示，如：（限制5张）
            isMulti: true, // 是否可上传多个
            picW: '200px', // 图片的回显宽度
            picH: 'auto', // 图片的回显高度
            maxNum: 1, // 最大上传数量
            attrName: '', // 用于保存图片路径的 input[type="hidden"] 的 [data-item-attr] 属性的值

            needInput: false, // 是否需要第一个信息输入框
            inputAttrName: '', // 用于保存第一个信息输入框的 input[type="hidden"] 的 [data-item-attr] 属性的值
            inputTip: '', // 第一个信息输入框的 placeholder

            needInput2: false, // 是否需要第二个信息输入框
            inputAttrName2: '', // 用于保存第二个信息输入框的 input[type="hidden"] 的 [data-item-attr] 属性的值
            inputTip2: '', // 第二个信息输入框的 placeholder

            needCompress: true, // 是否需要压缩
            compressSize: 200 * 1024, // 图片大小 >=compressSize 时会执行压缩
            compressRatio: 0.5, // 图片压缩率
            compressParamsImportant:false // 是否以传入的压缩参数为准
        };
        this.setMutableData(this.props);
    }

    /**
     * 设置组件中需要即受 props 影响又可在组件内部自行改变的数组；
     * 本组件中即 图片数组(picArr), 两个输入数组(inputsArr，inputsArr2)
     * @param nextProps Object 必传，下一个 props 对象,如果是初始化，此参数即 this.props
     * @param curProps Object 选传，当前的 props 对象，如果是初始化，此参数不需传入
     */
    setMutableData(nextProps, curProps) {
        const { picsArr, inputsArr, inputsArr2 } = nextProps.options,
            tmpInputArr = isArray(inputsArr) ? inputsArr : [],
            tmpInputArr2 = isArray(inputsArr2) ? inputsArr2 : [];
        this.picsArr = []; // 图片数据
        this.inputsArr = []; // 图片的第一个输入框数据
        this.inputsArr2 = []; // 图片的第二个输入框数据

        if (isArray(picsArr)) {
            var rt;
            this.picsArr = picsArr.filter((item, i) => {
                rt = ('' !== item.trim());

                if (rt) {
                    this.inputsArr[i] = $.trim(tmpInputArr[i]);
                    this.inputsArr2[i] = $.trim(tmpInputArr2[i]);
                }
                return rt;
            })
        }
        assign(this.options, nextProps.options); // 更新组件的设置项
    }

    /**
     * 上传成功之后的回调
     * @param rsp
     */
    uploadSucFunc(rsp) {
        const {isMulti, uploadType} = this.options;

        if (0 == rsp.errcode) {

            if ('video' == uploadType) {
                this.picsArr = isArray(rsp.data.video) ? rsp.data.video : [];
            } else {

                if (isMulti) {
                    this.picsArr = this.picsArr.concat(isArray(rsp.data.pic) ? rsp.data.pic : []);
                } else { // 单个上传的时候，将图片替换
                    this.picsArr = isArray(rsp.data.pic) ? rsp.data.pic : [];
                }
            }

            this.setState({updateCompTime: Math.ceil(Math.random() * 1000)}, () => {

                if (isFunction(this.props.fileUploaded)) { // 文件上传成功之后回调
                    this.props.fileUploaded(this.picsArr.join(';'), this.props.cbParams);
                }
                if (this.refs.upRef && this.refs.upRef.isAllUploaded()
                    && isFunction(this.props.allFileUploaded)) { // 所有文件上传成功之后回调
                    this.props.allFileUploaded(this.picsArr.join(';'), this.props.cbParams);
                }

            });

        }
    }

    /**
     * 上传失败之后的回调
     * @param jqXHR
     * @param textStatus
     * @param errorThrown
     */
    uploadErrFunc(jqXHR, textStatus, errorThrown) {
    }

    /**
     * 删除
     * @param e
     * @param ind
     */
    delPic(e, ind) {
        e.preventDefault();
        this.picsArr.splice(ind, 1);

        if (this.options.needInput) {
            this.inputsArr.splice(ind, 1);
        }
        if (this.options.needInput2) {
            this.inputsArr2.splice(ind, 1);
        }
        this.setState({percent: '', updateCompTime: Math.ceil(Math.random() * 1000)}, () => {
            isFunction(this.props.deletedUploaded) && (
                this.props.deletedUploaded(this.getAjaxData(), this.props.cbParams)
            )
        });
    }

    /**
     * 改变第一个输入框的输入内容
     * @param e
     * @param ind
     */
    handleChangeInputsArr(e, ind) {
        this.inputsArr[ind] = e.target.value;
        this.setState({updateCompTime: Math.ceil(Math.random() * 1000)});
    }

    /**
     * 改变第二个输入框的输入内容
     * @param e
     * @param ind
     */
    handleChangeInputsArr2(e, ind) {
        this.inputsArr2[ind] = e.target.value;
        this.setState({updateCompTime: Math.ceil(Math.random() * 1000)});
    }

    render() {
        const {
            disabled, uploadType, picW, picH,
            needInput, inputTip, needInput2, inputTip2,
            txt, // 按钮的文字，例如：点击上传图片
            txtTip, // 按钮上的提示文字，例如：（限制5张）
            fileTypes, // 支持的文件类型，例如：['jpg','png','jpeg']、['mp4']
            fileMaxSize,
            isMulti, // 是否可上传多个，默认可以
            maxNum,
            uploadUrl, // 上传图片的接口路径（api）
            needCompress,
            compressSize,
            compressRatio
            } = this.options;
        let remainNum = (
            isMulti ? (
                this.picsArr.length < maxNum ? (maxNum - this.picsArr.length) : 0
            ) : 1
        );

        return (
            <div className={`pic_div clearfix ${this.props.exClassName}`}>

                <div className="logo_wraper_upload clearfix">
                    <div className="logo_upload input_file_wraper">
                        <div className="pictype" style={{width: '100%',margin:'10px 0'}}>

                            {
                                this.picsArr.map((item, i) => {
                                    if (isString(item) && '' !== item.trim()) {

                                        if ('file' == uploadType) {
                                            return (
                                                <span key={i} className="file_item_tip bg-gray-light p5 dis-b"
                                                      style={{
                                                      whiteSpace: 'nowrap',
                                                      overflow: 'hidden',
                                                      textOverflow: 'ellipsis'}}>
                                                    {item}
                                                    <i className="fa fa-times pull-right f16 text-danger"
                                                       style={{padding:'2px 5px',cursor:'pointer'}}
                                                       onClick={(e) => this.delPic(e, i)}>
                                                    </i>
                                                </span>
                                            );
                                        } else if ('pic' == uploadType) {
                                            return (
                                                <div key={i} className="data-pic-contain"
                                                     style={{width:picW, height:picH}}>
                                                    <img src={`${$.trim(API_DOMAIN)+item}`}/>
                                                    {disabled ? null : (
                                                        <div className="data-act-icon act-del"
                                                             onClick={(e) => this.delPic(e, i)}>×
                                                        </div>
                                                    )}
                                                    <div className="">
                                                        {
                                                            needInput &&
                                                            <input
                                                                className={`data-need-input w100 form-control ${disabled ? 'disabled bg-gray':''}`}
                                                                type="text"
                                                                placeholder={inputTip}
                                                                value={this.inputsArr[i]}
                                                                onChange={(e) => this.handleChangeInputsArr(e,i)}/>
                                                        }
                                                    </div>
                                                    <div className="">
                                                        {
                                                            needInput2 &&
                                                            <input
                                                                className={`data-need-input w100 form-control ${disabled ? 'disabled bg-gray':''}`}
                                                                type="text"
                                                                placeholder={inputTip2}
                                                                value={this.inputsArr2[i]}
                                                                onChange={(e) => this.handleChangeInputsArr2(e,i)}/>
                                                        }
                                                    </div>
                                                </div>
                                            )
                                        } else if ('video' == uploadType) {
                                            return (
                                                <video width={picW} height={picH} controls="controls">
                                                    <source src={`${$.trim(API_DOMAIN)+item}`} type="video/mp4"></source>
                                                    你当前的软件版本不支持播放视频，请升级后重试
                                                </video>
                                            )
                                            //return (
                                            //    <span key={i} className="file_item_tip bg-gray-light p5 dis-b"
                                            //          style={{
                                            //          whiteSpace: 'nowrap',
                                            //          overflow: 'hidden',
                                            //          textOverflow: 'ellipsis'}}>
                                            //        {item}
                                            //        <i className="fa fa-times pull-right f16 text-danger"
                                            //           style={{padding:'2px 5px',cursor:'pointer'}}
                                            //           onClick={(e) => this.delPic(e, i)}>
                                            //        </i>
                                            //    </span>
                                            //)
                                        }

                                    } else {
                                        return null
                                    }
                                }, this)
                            }
                        </div>
                        <UploadBase
                            ref="upRef"
                            options={{
                                txt, // 按钮的文字，例如：点击上传图片
                                txtTip, // 按钮上的提示文字，例如：（限制5张）
                                uploadType, /*上传的文件格式（'pic':图片; 'file':文件;），默认是图片*/
                                fileTypes, // 支持的文件类型，例如：['jpg','png','jpeg']、['mp4']
                                fileMaxSize,
                                isMulti, // 是否可上传多个，默认可以
                                onceNum: remainNum, // 剩余可上传图片数
                                uploadUrl, // 上传图片的接口路径（api）
                                disabled // 不可操作
                            }}
                            needCompress={needCompress}
                            compressSize={compressSize}
                            compressRatio={compressRatio}
                            uploadSucCb={this.uploadSucFunc.bind(this)}
                            uploadErrCb={this.uploadErrFunc.bind(this)}
                        />

                    </div>
                    <input type="hidden" data-item-attr={this.options.attrName} data-default-val=""
                           value={this.picsArr.join(';')} readOnly="true"/>

                    {
                        this.options.needInput && (
                            <input className="needInput" type="hidden"
                                   data-item-attr={this.options.inputAttrName}
                                   value={this.inputsArr.join(';')} readOnly="true"/>
                        )
                    }
                    {
                        this.options.needInput2 && (
                            <input className="needInput" type="hidden"
                                   data-item-attr={this.options.inputAttrName2}
                                   value={this.inputsArr2.join(';')} readOnly="true"/>
                        )
                    }

                </div>

            </div>
        )
    }

}

UploadImg.defaultProps = {
    exClassName: '', // 额外 className
    options:{}, // 设置项
    fileUploaded: undefined, // 文件上传完成之后的回调函数
    // 例如： Function(picsStr) {** picsStr (String) 以‘;’分隔的 **}
    allFileUploaded: undefined, // 所有文件上传完成之后的回调函数，如上面的 fileUploaded 属性
    deletedUploaded: undefined, // 删除某个已经上传了的文件之后的回调函数，例如：
                                // @params params (Object) 数据结构请查看本组件的 getAjaxData 方法返回的数据
                                // function(params)
    cbParams: {}, // 回调函数的参数
};

/*

options 属性：{
 uploadUrl: '', // ajax 请求的接口 url
 uploadType: 'pic', // 上传的文件格式（'pic':图片; 'file':文件），默认是图片
 fileTypes: [], // 支持的文件类型，例如：['jpg','png','jpeg']、['mp4']
 fileMaxSize: 15 * 1024 * 1024, // 文件大小

 txt: '', // 上传按钮文字，如：点击上传图片
 txtTip: '', // 上传按钮中的提示，如：（限制5张）
 isMulti: true, // 是否可上传多个
 picW: '200px', // 图片的回显宽度
 picH: '200px', // 图片的回显高度
 maxNum: 1, // 最大上传数量
 attrName: '', // 用于保存图片路径的 input[type="hidden"] 的 [data-item-attr] 属性的值

 needInput: false, // 是否需要第一个信息输入框
 inputAttrName: '', // 用于保存第一个信息输入框的 input[type="hidden"] 的 [data-item-attr] 属性的值
 inputTip: '', // 第一个信息输入框的 placeholder

 needInput2: false, // 是否需要第二个信息输入框
 inputAttrName2: '', // 用于保存第二个信息输入框的 input[type="hidden"] 的 [data-item-attr] 属性的值
 inputTip2: '', // 第二个信息输入框的 placeholder

 needCompress: true, // 是否需要压缩
 compressSize: 200 * 1024, // 图片大小 >=compressSize 时会执行压缩
 compressRatio: 0.5, // 图片压缩率
 compressParamsImportant:false // 是否以传入的压缩参数为准
}


 */